<template>
	<div class="mobile-home">
		<div class="mobile-home-top"></div>
		<BlogMobileTabs @update:selected="handlerSelectedTabs" />
		<div class="mobile-home-selected">
			<div class="mobile-home-selected-nation">
				<span class="gray">适用国家：</span>
				<div>
					<BlogHotSelected v-model="isSelected" @click="handlerOpenNation" :nation-info="nationInfo" mode="mobile"></BlogHotSelected>
				</div>
			</div>
			<div class="mobile-home-selected-hot">
				<span class="gray">热门标签：</span>
				<div>
					<BlogMobileTagSelected @update:open="handlerOpenTag"></BlogMobileTagSelected>
				</div>
			</div>
		</div>
		<div class="mobile-home-list" v-show="activeTab === MOBILE_TABS[0]">
			<div class="mobile-home-list-layout" v-for="value in 10">
				<BlogSummary mode="mobile"></BlogSummary>
			</div>
		</div>
		<div class="mobile-home-hotList" v-show="activeTab === MOBILE_TABS[1]">
			<div class="mobile-home-hotList-layout" v-for="value in 10">
				<BlogSummary mode="mobile" :show-hot="true"></BlogSummary>
			</div>
		</div>
		<div class="mobile-home-hotBlog" v-show="activeTab === MOBILE_TABS[2]">
			<BlogHotBlog></BlogHotBlog>
		</div>
		<BlogMobileHotTags v-model="isOpenHotTags" @update:sure="handlerSureTags" @update:close="handlerColseTags"></BlogMobileHotTags>
		<BlogMobileNationList
			v-model="isOpenNation"
			height="450px"
			@update:sure="handlerSureNation"
			@update:close="handlerColseNation"
		></BlogMobileNationList>
	</div>
</template>
<script setup>
	import { MOBILE_TABS } from '~/constant/modules/tabs';

	const isSelected = ref(false);
	const isOpenNation = ref(false);
	const isOpenHotTags = ref(false);
	const activeTab = ref(MOBILE_TABS[0]);
	const nationInfo = ref({});
	function handlerOpenTag() {
		isOpenHotTags.value = true;
	}
	function handlerSureTags(info) {
		console.log(info);
	}
	function handlerColseTags() {
		isOpenHotTags.value = false;
	}
	function handlerOpenNation() {
		isOpenNation.value = true;
	}
	function handlerSureNation(info) {
		console.log(info);
		isSelected.value = true;
	}
	function handlerColseNation() {
		isOpenNation.value = false;
	}

	function handlerSelectedTabs(info) {
		console.log(info);
		activeTab.value = info;
	}
</script>

<style lang="scss" scoped>
	.mobile-home {
		background-color: #f1f1f1;
		.mobile-home-top {
			height: 88px;
			background-color: white;
		}
		.mobile-home-selected {
			background-color: #f9f9f9;
			padding: 20px;
			@include mobileVwCalc(768px);
			.mobile-home-selected-nation,
			.mobile-home-selected-hot {
				@include flex(_, space-between);
				span {
					@include font(_, 28px, 36px, 400);
				}
			}
			.mobile-home-selected-nation {
				margin-bottom: 22px;
			}
		}
		.mobile-home-list {
			@include flex(column);
			.mobile-home-list-layout {
				margin-bottom: 20px;
				&:first-child {
					margin-top: 20px;
				}
			}
		}
		.mobile-home-hotList {
			@include flex(column);
			.mobile-home-hotList-layout {
				margin-bottom: 20px;
				&:first-child {
					margin-top: 20px;
				}
			}
		}
		.mobile-home-hotBlog {
			margin-top: 20px;
			margin-bottom: 20px;
			@include flex;
		}
	}
</style>
